<script lang="ts" setup>
import { ref, reactive } from "vue";
const props = defineProps({
  total: {
    type: Number,
    default: 0
  },
	current: {
    type: Number,
    default: 1
  },
	pageSize: {
    type: Number,
    default: 10
  },
});
const pagination = reactive({
  current: props.current,
  pageSize: props.pageSize
});
const pageSizeOptions = ref<string[]>(["10", "20", "30", "50", "100"]);
const emits = defineEmits(["paginationData", "paginationCurrent"]);
const size = ref(10);
const onpaginationChange = (current: number, pageSize: number) => {
	pagination.current = pageSize === size.value ? current : 1;
  size.value = pageSize;
  pagination.pageSize = pageSize;
  emits("paginationData", pagination);
};
</script>

<template>
  <a-pagination
		class="pagination"
		:current="pagination.current"
		:page-size="pagination.pageSize"
    :page-size-options="pageSizeOptions"
		:total="props.total"
    @change="onpaginationChange"
		show-size-changer
		:show-total="(total) => `共${total}条数据`"
	>
	</a-pagination>
</template>

<style lang="less" scoped>
.pagination {
	display: flex;
	justify-content: center;
	padding: 24px 0;
}
</style>
